<template>
  <el-form-item :label="i18nt('designer.setting.colSummary')">
    <!-- v-model="optionModel.tableColField" -->
    <el-select v-model="optionModel.colSummary">
      <el-option
        v-for="item in summaryOutList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </el-form-item>
</template>

<script>
import i18n from "Yan/utils/i18n";
import { deepClone } from "Yan/utils";
import { colUnits, colOptions } from "./tableColSetting";

export default {
  name: "colSummary-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    optionModel: Object,
  },
  data() {
    return {
      tableColFields: colUnits.map((i) => ({
        label: i.title,
        value: i.type,
      })),
      tableColField: null,
    };
  },
  computed: {
    summaryOutList() {
      const { fieldLib } = this.designer;
      return Object.keys(fieldLib)
        .filter((i) => fieldLib[i].type === "input")
        .map((i) => ({
          value: i,
          label: `${fieldLib[i].options.label}#${i}`,
        }));
    },
  },
  methods: {
    tableColFieldTypeChange(e) {
      const newCon = deepClone(colUnits.find((i) => i.type === e));
      // const oldCon = this.designer.fieldLib[this.designer.selectedId]
      newCon.id = this.designer.selectedId;
      newCon.options = {
        ...colOptions,
        ...newCon.options,
        tableColField: e,
        name: newCon.id,
        tableLabel: this.optionModel.tableLabel,
      };
      // console.log("tableColFieldTypeChange", { ...newCon });
      this.designer.addFieldLib(newCon);
      this.designer.emitEvent("tableColField_Change", newCon);
      this.designer.emitEvent("fieldLib_change", newCon);
    },
  },
};
</script>

<style scoped>
</style>
